﻿<Page
    x:Name="pageRoot"
    x:Class="PuzzleModern.SelectorPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PuzzleModern"
    xmlns:common="using:PuzzleModern.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    NavigationCacheMode="Enabled"
    SizeChanged="pageRoot_SizeChanged"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
        x:Name="itemsViewSource"
        Source="{Binding Items}"/>
    </Page.Resources>

    <Page.BottomAppBar>
        <AppBar Background="#333" IsSticky="True">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
                    <AppBarButton x:Name="ButtonPin" Icon="Pin" Label="Pin to Start" Click="ButtonPin_Click"
                                  Visibility="{Binding PinVisible}"/>
                    <AppBarButton x:Name="ButtonUnpin" Icon="UnPin" Label="Unpin" Click="ButtonUnpin_Click"
                                  Visibility="{Binding UnpinVisible}"/>
                </StackPanel>
                <StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                    <AppBarButton x:Name="ButtonOpen" Label="Load Game" Icon="OpenFile" Click="ButtonOpen_Click"/>
                    <AppBarButton x:Name="ButtonHelp" Label="Help" Icon="Help" Click="ButtonHelp_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="#010" RequestedTheme="Dark">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Horizontal scrolling grid -->
        <SemanticZoom Grid.RowSpan="2" x:Name="itemSemanticZoom"
                      ViewChangeStarted="itemSemanticZoom_ViewChangeStarted">
            <SemanticZoom.ZoomedInView>
                <GridView
                    x:Name="itemGridView"
                    AutomationProperties.AutomationId="ItemsGridView"
                    AutomationProperties.Name="Items"
                    TabIndex="1"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    SelectionMode="Single"
                    Padding="116,136,116,46"
                    SelectedIndex="-1"
                    SelectionChanged="itemGridView_SelectionChanged"
                    ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                    IsItemClickEnabled="True"
                    ItemClick="itemGridView_ItemClick">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid HorizontalAlignment="Left" Width="210" Height="275">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="210" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Border Grid.Row="0" Background="#dcdad5">
                                    <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Name}"/>
                                </Border>
                                <StackPanel Grid.Row="0" VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                    <TextBlock Text="{Binding Name}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" Height="30" Margin="15,0,15,0" FontWeight="SemiBold"/>
                                </StackPanel>
                                <Border Grid.Row="1" VerticalAlignment="Top" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                    <TextBlock Text="{Binding Synopsis}" Foreground="#eee" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="15,0,15,10" Height="65" FontSize="12"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView
                    x:Name="zoomedItemGridView"
                    AutomationProperties.AutomationId="ItemsGridView"
                    AutomationProperties.Name="Items"
                    ScrollViewer.IsHorizontalScrollChainingEnabled="False"
                    TabIndex="1"
                    ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                    IsItemClickEnabled="True"
                    ItemClick="itemGridView_ItemClick"
                    Padding="116,236,116,146">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid HorizontalAlignment="Left" Width="220" Height="50">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="50" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0" Background="#dcdad5">
                                    <Image Source="{Binding Icon}" Stretch="Uniform" AutomationProperties.Name="{Binding Name}"/>
                                </Border>
                                <StackPanel Grid.Column="1" VerticalAlignment="Stretch" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                                    <TextBlock Text="{Binding Name}"
                                               Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" 
                                               Style="{StaticResource BaseTextBlockStyle}" 
                                               Margin="15,10,0,0" VerticalAlignment="Center"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
        

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
        </Grid>
    </Grid>
</Page>
